<template>
  <div
    class="session-wrapper"
    style="min-width: 1040px;
    min-height: 99.9vh;
    position: relative;"
  >
    <canvas id="canvas" />
    <div class="ui container">
      <div class="session-body">
        <!-- 左边 -->
        <div class="session-sidebox">
          <div class="session-sidebox__container">

            <div class="session-sidebox__header">
              <div class="session-sidebox__logo">
                <a href="/" draggable="false">
                  <img alt="logo" src="@/assets/images/logos/yntx-logo-big.png" draggable="false">
                </a>
              </div>
              <h1 class="session-sidebox__title" />
              <h2 class="session-sidebox__subtitle">
                与你同行基金平台
              </h2>
            </div>

            <div class="session-sidebox__content">
              <div class="session-sidebox-content__container">
                <div class="session-sidebox-comments__header">
                  <span class="session-sidebox-comments__title">{{ FamousSaying.name }}</span>
                  <span class="session-sidebox-comments__position">{{ FamousSaying.title }}</span>
                </div>
                <div class="session-sidebox-comments__content">
                  {{ FamousSaying.joke }}
                </div>
              </div>
            </div>

            <div class="session-sidebox__footer">
              <a href="/" target="_blank" one-link-mark="yes">
                <strong class="session-sidebox__icon-hot">与你同行</strong>
                <span class="session-sidebox__divider">-</span>
                基金平台
                <i class="iconfont icon-arrow-circle-right " />
              </a>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="session-form">
          <div class="session-form__container is-register">
            <header class="session-form__header">
              <h2 class="session-form__title">
                <span>注册</span>
              </h2>
              <span class="pull-right">
                <span class="have-account">已有账号</span>
                <a href="/login" one-link-mark="yes" draggable="false">点此登录</a>
              </span>
            </header>

            <el-form ref="form" :model="form" :rules="rules" size="middle">
              <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="用户名" />
              </el-form-item>
              <!--              <el-form-item prop="nickName">-->
              <!--                <el-input v-model="form.nickName" placeholder="昵称" />-->
              <!--              </el-form-item>-->
              <!--              <el-form-item>-->
              <!--                <el-radio-group v-model="form.gender" style="width: 178px">-->
              <!--                  <el-radio label="男">男</el-radio>-->
              <!--                  <el-radio label="女">女</el-radio>-->
              <!--                </el-radio-group>-->
              <!--              </el-form-item>-->
              <el-form-item prop="phone">
                <el-input v-model.number="form.phone" placeholder="电话" />
              </el-form-item>
              <el-form-item prop="email">
                <el-input v-model="form.email" placeholder="邮箱" />
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" type="password" autocomplete="off" placeholder="密码" />
              </el-form-item>
              <el-form-item prop="checkPass">
                <el-input v-model="form.checkPass" type="password" autocomplete="off" placeholder="确认密码" />
              </el-form-item>
              <el-form-item />
              <el-form-item>
                <el-button type="primary" class="register-btn" :loading="loading" @click="onSubmit">立即注册</el-button>
              </el-form-item>
            </el-form>

            <!-- 其他方式登录 -->
            <div class="session-login-oauth">
              <div class="session-login-oauth__container">
                <!--                <div class="field">-->
                <!--                  <div class="ui horizontal divider session-login__oauth-title">-->
                <!--                    <span class="text-muted">-->
                <!--                      其他方式登录-->
                <!--                    </span>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--                <div class="ui horizontal list session-oauth__list">-->
                <!--                  <div class="item">-->
                <!--                    <a href="https://www.qq.com" one-link-mark="yes">-->
                <!--                      <div class="git-other-login-icon">-->
                <!--                        <svg-icon icon-class="QQ" title="使用 QQ 帐号登录" />-->
                <!--                      </div>-->
                <!--                    </a>-->
                <!--                  </div>-->
                <!--                  <div class="item">-->
                <!--                    <a href="https://www.wechat.com" one-link-mark="yes">-->
                <!--                      <div class="git-other-login-icon">-->
                <!--                        <svg-icon icon-class="微信" title="使用微信帐号登录" />-->
                <!--                      </div>-->
                <!--                    </a>-->
                <!--                  </div>-->
                <!--                  <div class="item">-->
                <!--                    <a href="https://www.weibo.com" one-link-mark="yes">-->
                <!--                      <div class="git-other-login-icon">-->
                <!--                        <svg-icon icon-class="微博" title="使用微博帐号登录" />-->
                <!--                      </div>-->
                <!--                    </a>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--              </div>-->
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>

  </div></template>

<script>
import { isvalidPhone } from '@/utils/validate'
import { create } from '@/api/front/user/customerUser'
import Backgroud from '@/assets/images/user/background.jpg'
import FamousSayings from '@/views/front/FamousSayings.json'

export default {
  name: 'Index',
  components: {},
  data() {
    // 自定义验证 电话号码
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }
    // 自定义验证 密码
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.form.validateField('checkPass')
        }
        callback()
      }
    }

    // 自定义验证 密码
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      Backgroud: Backgroud,
      loading: false,
      form: {
        username: '',
        nickName: '',
        gender: '男',
        phone: '',
        email: '',
        password: '',
        checkPass: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        // nickName: [
        //   { required: true, message: '请输入用户昵称', trigger: 'blur' },
        //   { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        // ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'blur', validator: validPhone }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePass }
        ],
        checkPass: [
          { required: true, trigger: 'blur', validator: validatePass2 }
        ]
      },

      // 名人名言
      FamousSaying: {
        name: '谢礼',
        title: '与你基金创始人',
        joke: '“ 诺安人没有撤退可言，小跌小加，大跌大加。”'
      }
    }
  },
  watch: {
    // 监听用户输入的用户名，给用户昵称赋值
    form: {
      handler(val) {
        this.form.nickName = this.form.username
      },
      deep: true
    }
  },
  mounted() {
    this.initCanvas()

    // 取随机名人名言
    const ranNumber = Math.random()
    if (ranNumber < 0.5) {
      this.FamousSaying = FamousSayings[0]
    }
    this.FamousSaying = FamousSayings[1]
  },
  methods: {
    initCanvas() {
      // 可调参数
      // const BACKGROUND_COLOR = '#5582F3' // 背景颜色
      const BACKGROUND_COLOR = '#ffffff' // 背景颜色
      const POINT_NUM = 100 // 星星数目
      // const POINT_COLOR = 'rgba(255,255,255,1)' // 点的颜色
      const POINT_COLOR = '#f38d30' // 点的颜色
      const LINE_LENGTH = 10000 // 点之间连线长度(的平方)

      // 创建背景画布
      const cvs = document.getElementById('canvas')
      cvs.width = window.innerWidth
      cvs.height = window.innerHeight
      cvs.style.cssText = 'position:fixed;top:0px;left:0px;z-index:-1;opacity:1.0;'
      // 增加一个canvas元素，会导致所有页面都有
      // document.body.appendChild(cvs)

      const ctx = cvs.getContext('2d')

      // eslint-disable-next-line no-unused-vars
      const startTime = new Date().getTime()

      // 随机数函数
      // eslint-disable-next-line no-unused-vars
      function randomInt(min, max) {
        return Math.floor((max - min + 1) * Math.random() + min)
      }

      function randomFloat(min, max) {
        return (max - min) * Math.random() + min
      }

      // 构造点类
      function Point() {
        this.x = randomFloat(0, cvs.width)
        this.y = randomFloat(0, cvs.height)

        // 速度
        var speed = randomFloat(0.2, 1)
        var angle = randomFloat(0, 2 * Math.PI)

        this.dx = Math.sin(angle) * speed
        this.dy = Math.cos(angle) * speed

        this.r = 1.2

        this.color = POINT_COLOR
      }

      Point.prototype.move = function() {
        this.x += this.dx
        if (this.x < 0) {
          this.x = 0
          this.dx = -this.dx
        } else if (this.x > cvs.width) {
          this.x = cvs.width
          this.dx = -this.dx
        }
        this.y += this.dy
        if (this.y < 0) {
          this.y = 0
          this.dy = -this.dy
        } else if (this.y > cvs.height) {
          this.y = cvs.height
          this.dy = -this.dy
        }
      }

      Point.prototype.draw = function() {
        ctx.fillStyle = this.color
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
        ctx.closePath()
        ctx.fill()
      }

      const points = []

      function initPoints(num) {
        for (var i = 0; i < num; ++i) {
          points.push(new Point())
        }
      }

      const p0 = new Point() // 鼠标
      p0.dx = p0.dy = 0
      // eslint-disable-next-line no-unused-vars
      let degree = 2.5
      document.onmousemove = function(ev) {
        p0.x = ev.clientX
        p0.y = ev.clientY
      }
      document.onmousedown = function(ev) {
        degree = 5.0
        p0.x = ev.clientX
        p0.y = ev.clientY
      }
      document.onmouseup = function(ev) {
        degree = 2.5
        p0.x = ev.clientX
        p0.y = ev.clientY
      }
      window.onmouseout = function() {
        p0.x = null
        p0.y = null
      }

      function drawLine(p1, p2, deg) {
        var dx = p1.x - p2.x
        var dy = p1.y - p2.y
        var dis2 = dx * dx + dy * dy
        if (dis2 < 2 * LINE_LENGTH) {
          if (dis2 > LINE_LENGTH) {
            if (p1 === p0) {
              p2.x += dx * 0.03
              p2.y += dy * 0.03
            } else return
          }
          const t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg
          // ctx.strokeStyle = 'rgba(0,0,0,' + t + ')'
          ctx.strokeStyle = 'rgba(243,141,48,' + t + ')'
          ctx.beginPath()
          ctx.lineWidth = 1.5
          ctx.moveTo(p1.x, p1.y)
          ctx.lineTo(p2.x, p2.y)
          ctx.closePath()
          ctx.stroke()
        }
        return
      }

      // 绘制每一帧
      function drawFrame() {
        cvs.width = window.innerWidth
        cvs.height = window.innerHeight
        ctx.fillStyle = BACKGROUND_COLOR
        ctx.fillRect(0, 0, cvs.width, cvs.height)

        const arr = (p0.x == null ? points : [p0].concat(points))
        for (var i = 0; i < arr.length; ++i) {
          for (var j = i + 1; j < arr.length; ++j) {
            drawLine(arr[i], arr[j], 1.0)
          }
          arr[i].draw()
          arr[i].move()
        }

        window.requestAnimationFrame(drawFrame)
      }

      initPoints(POINT_NUM)
      drawFrame()
    },
    // 登录操作
    onSubmit() {
      this.form.nickName = this.form.username
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        } else {
          // 新增用户
          this.loading = true
          create(this.form).then(res => {
            console.log(res)
            this.loading = false
            this.$notify.success('注册成功！请登录~')
            this.$router.push('/login')
          }).catch(err => {
            console.log(err)
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.session-wrapper {
  min-width: 1040px;
  min-height: 99.9vh;
  position: relative;
  box-sizing: inherit;

  .ui.container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    padding: 0;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 1040px;
    padding: 0 20px;
    margin: 0 auto;

    .session-body {
      display: flex;
      margin: auto;
      width: inherit;
      position: relative;
      box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 30%);

      .session-sidebox {
        color: #fff;
        position: relative;
        padding: 64px 80px 48px;
        background: url('~@/assets/images/user/background.jpg');

        margin: 0 auto;
        width: 50%;
        min-height: 564px;

        .session-sidebox__container {
          position: relative;
          z-index: 1;
          height: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;

          .session-sidebox__header {
            .session-sidebox__logo img {
              width: 166px;
              border: 0;
            }

            .session-sidebox__title {
              font-size: 40px;
              min-height: 1rem;
              margin: 0;
            }

            .session-sidebox__subtitle {
              color: white;
              margin: 0;
              font-weight: normal;
              font-size: 1.714rem;
              cursor: default;
            }
          }

          .session-sidebox__content {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;

            .session-sidebox-content__container {
              color: #fff;
              font-size: 14px;
              margin-top: 46px;

              .session-sidebox-comments__header {
                //opacity: 0.9;
                opacity: 1;

                .session-sidebox-comments__title {
                  font-size: 17px;
                }

                .session-sidebox-comments__position {

                }
              }

              .session-sidebox-comments__content {
                opacity: 1;
                margin-top: 16px;
                line-height: 1.71429;
                font-size: 20px;
                font-weight: bold;
              }
            }
          }

          .session-sidebox__footer {
            font-size: 14px;
            padding-top: 40px;
            margin-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);

            a {
              color: white;
              text-decoration: none;
              cursor: pointer;
              background: transparent;

              strong {
                font-weight: bold;
              }

              .session-sidebox__divider {
                margin: 0 7px;
              }

              .iconfont {
                font-size: 1em;
                -webkit-text-stroke-width: 0;
                display: inline-block;
                vertical-align: top;

                font-family: "iconfont" !important;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
              }
            }

            .session-sidebox__icon-hot::after {
              content: 'hot';
              position: absolute;
              font-size: 12px;
              padding: 2px 6px;
              border-radius: 1px;
              margin-top: -12px;
              background-color: #C71D23;
              -webkit-transform: scale(0.84);
              transform: scale(0.84);
            }

          }
        }
      }

      .session-form {
        background: rgba(255, 255, 255, 0.9);
        margin: 0 auto;
        width: 50%;
        min-height: 564px;

        .session-form__container {
          height: 100%;
          padding: 64px 70px 48px;
          position: relative;

          .session-form__header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-bottom: 24px;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;

            .session-form__title {
              display: inline-block;
              margin: 0;
              cursor: default;
            }

            .pull-right {
              float: right;
              box-sizing: inherit;

              .have-account{
                font-size: 14px;
                cursor: default;
              }

              a {
                font-size: 14px;
                text-decoration: none;
                cursor: pointer;
                color: #5582F3;
              }
            }
          }

          .session-login-oauth {
            margin-top: 44px;

            .session-login-oauth__container {
              padding-top: 24px;
              border-top: 1px solid #eeeeee;

              .text-muted{
                cursor: default;
              }

              .ui.horizontal.list {
                display: inline-block;
                font-size: 2em;
                list-style-type: none;
                padding: 20px 1em;
                display: -webkit-box !important;
                display: -ms-flexbox !important;
                display: flex !important;
                -webkit-box-pack: center !important;
                -ms-flex-pack: center !important;
                justify-content: space-around !important;

                .item{
                  //margin-right: 20px;
                }
              }
            }
          }
        }
      }
    }
  }

  .register-btn {
    width: 100%;
    font-size: 18px;
    line-height: 22px;
    padding: 8px 26px;
    font-weight: 500;
    color: #fff;
    background: rgb(246, 116, 61);
    box-shadow: 0px 0em 0px 0px rgb(39 41 43 / 15%) inset;
    border: 1px solid rgb(246, 116, 61);
  }

}

.el-input{
  ::v-deep .el-input__inner:focus{
    border: 1px solid rgb(246, 116, 61);
  }
}

// 表单项间距
.el-form-item {
  ::v-deep .el-form-item__content {
    line-height: 40px;
  }
}
</style>
